<template>
	<view class="nav u-flex">
		<view class="left" @click="backClick">
			<image src="../../static/images/back.png" mode=""></image>
		</view>
		<view class="right u-text-center">{{title}}</view>
	</view>
</template>

<script>
	export default {
		name: 'sNavBack',
		props:['title'],
		methods: {
			backClick() {
				this.$emit('goBack')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.nav{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 999;
		background-color: #3B83FE;
		color: #FFFFFF;
		padding: 60rpx 0 30rpx;
		.left {
			width: 60rpx;
			height: 50rpx;
			position: absolute;
			left: 2.5%;
			top: 53.3%;
			image {
				width: 32rpx;
				height: 32rpx;
			}
		}
		.right {
			flex: 1;
			font-size: 30rpx;
		}
	}
	/* XR机型媒体查询 */
	@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2){
		.nav{
				padding: 100rpx 0 20rpx;
				.left {
					top: 65.5%;
				}
				.right{
					font-size: 32rpx;
					font-weight: 500;
				}
		}
	}
	/* X、XS机型的媒体查询 */
	@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
		.nav{
				padding: 100rpx 0 20rpx;
				.left {
					top: 63.5%;
				}
				.right{
					font-size: 32rpx;
					font-weight: 500;
				}
		}
	}
	/* XS MAX机型媒体查询 */
	@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3){
		.nav{
				padding: 100rpx 0 20rpx;
				.left {
					top: 63.5%;
				}
				.right{
					font-size: 32rpx;
					font-weight: 500;
				}
		}
	}

</style>
